Slideshow alternative
Note: The following article is outdated. I recommend you check out my rotating images demo from the jQuery Cookbook. You can download the code here.
First off, let me say that I did not write this bit of JavaScript, and that full credit goes to Steven G. Chipman for his excellent Cross Fade Redux. That being said, you can check out the demo that I have made here…
This came about as a result of talking with Jesse Anderson a few months ago, and more recently Matthew Smith, on how to do rotating images with links on a church site. For instance, check out the way The City Church does theirs using SlideShowPro. It's pretty cool, because it gets your attention, and then you can click on the image to go to the corresponding page to read more. I think that SlideShowPro is a great product, and use it myself for my portfolio.
Yet, to administer SSP takes owning either Flash 8 or MX 2004, $20.00, and a bit of XML savvy. Additionally, you can also buy Director, a PHP and MySQL based Ajax admin that will handle all the XML heavy lifting for you. Both of these are worth well more than what Todd Dominey charges for them. So, please do not mis-interpret this post as a slam against SlideShowPro.
All I am saying is that if you just want to simply rotate images with some accompanying links, and you want to do it on the cheap, this is a possible alternative. It sure beats using animated GIF images, like the ones seen on the Billy Graham website. The trouble with GIFs is limited color depth, choppy transitions, and ability to only put one link despite multiple frames, not to mention having to re-create the file if you want to splice in new images.
So, what I have done in this example is follow Steven's lead, but have diverged for how things are handled with JS off. In his example, you get the truely accessible alternative of seeing all the images laid out. This is nice, but also breaks the layout of a site. What I have done is made it so only the initial image is viewable with JS off, so the user doesn't see a problem.
So, for what it's worth, there you have it. It's not revolutionary, but will get the job done if you need rotating images that are also linked. Oh, and don't forget to set the correct path to your CSS file in the JavaScript.